<template>
  <div class="order-home">
    <!-- 餐厅简介 -->
    <div class="restaurant-info">
      <h2>{{ restaurantInfo.name }}</h2>
      <p>{{ restaurantInfo.description }}</p>
    </div>

    <!-- 最近可订餐的列表 -->
    <div class="order-list">
      <h3>最近可订餐</h3>
      <div class="meal" v-for="(meal, index) in orderableMeals" :key="index">
        <div class="meal-date">{{ meal.date }}</div>
        <div class="meal-deadline">订单截止时间: {{ meal.deadline }}</div>
        <div class="meal-items">
          <h4>菜品列表</h4>
          <ul>
            <li v-for="(item, itemIndex) in meal.items" :key="itemIndex">
              {{ item.name }} - {{ item.price }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const restaurantInfo = ref({
  name: "柯姐小食堂",
  description: "提供新鲜美味的餐饮服务，欢迎您的光临！",
});

const orderableMeals = ref([
  {
    date: "2023-10-01",
    deadline: "2023-09-30 23:59",
    items: [
      { name: "宫保鸡丁", price: "28元" },
      { name: "清蒸鲈鱼", price: "38元" },
    ],
  },
  {
    date: "2023-10-02",
    deadline: "2023-10-01 23:59",
    items: [
      { name: "红烧肉", price: "32元" },
      { name: "麻婆豆腐", price: "26元" },
    ],
  },
]);
</script>

<style scoped lang="scss">
.order-home {
  padding: 0.2rem;
}

.restaurant-info {
  margin-bottom: $margin-base;
}

.order-list {
  .meal {
    border-radius: $radius-base;
    box-shadow: 0 0 0.04rem rgba(0, 0, 0, 0.1);
    margin-bottom: $margin-base;
    padding: $margin-base;
  }
}
</style>
